<template>
  <!--  @ok="handleSubmit"-->

  <BasicModal
    v-bind="$attrs"
    @register="register"
    showFooter
    :title="getTitle"
    width="60%"
    style="height: 100%"
    @ok="handleSubmit"
    @cancel="closeFn"
  >
    <!--    <BasicTable @register="registerTable">-->

    <!--    </BasicTable>-->

    <div style="overflow: hidden; width: 100%; height: 625px">
      <VxeBasicTable ref="tableRef" v-bind="gridOptions"> </VxeBasicTable>
    </div>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, computed, unref, reactive } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { BasicTable, useTable, TableAction, FormSchema } from '@/components/Table';
  import { columns, searchFormSchema, vxeTableColumns, vxeTableFormSchema } from '../role.data';
  import {
    BasicTableProps,
    VxeBasicTable,
    VxeGridInstance,
    VxeGridListeners,
  } from '@/components/VxeTable';

  import { materialTableListApi, priceTableListApi } from '@/api/sys/msUser';

  import { useMessage } from '@/hooks/web/useMessage';

  const emit = defineEmits(['success', 'register']);
  const isUpdate = ref(true);
  const { createMessage } = useMessage();

  const levelNames = ref('');

  const tableRef = ref<VxeGridInstance>();

  const gridOptions = reactive<BasicTableProps>({
    id: 'VxeTable',
    // keepSource: true,
    editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
    showOverflow: true,
    size: 'mini',
    height: 'auto',
    columns: vxeTableColumns,
    toolbarConfig: {
      buttons: [
        // {
        //   content: '新增',
        //   buttonRender: {
        //     name: 'AButton',
        //     props: {
        //       type: 'primary',
        //       preIcon: 'mdi:page-next-outline',
        //     },
        //     events: {
        //       click: () => {
        //         // tableRef.value?.insert({ name: '新增的' });
        //         // createMessage.success('新增成功');
        //         handleCreate();
        //       },
        //     },
        //   },
        // },
      ],
    },
    radioConfig: {
      highlight: true,
    },
    formConfig: {
      enabled: true,
      items: vxeTableFormSchema,
    },
    rowConfig: {
      labelField: 'mname',
      trigger: 'row',
    },
    proxyConfig: {
      props: {
        result: 'data.list',
        list: 'data.list',
        total: 'data.totalResult',
        message: 'message',
      },
      ajax: {
        query: async ({ page, form }) => {
          return materialTableListApi({
            page: page.currentPage,
            pageSize: page.pageSize,
            IfXuNiJian: 0,
            ...form,
          });
        },
        // queryAll: async ({ form }) => {
        //   return await demoListApi(form);
        // },
      },
    },
  });

  const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //console.log("--data::",data)
    //打开弹层后的回调
    // clazzId.value=data.clazzId;
    // levelNames.value=data.levelNames;
    // reload()
  });

  const getTitle = ref('选择物料');

  async function handleSubmit() {
    let selectRows = tableRef.value.getCheckboxRecords();

    if (!selectRows.length) {
      createMessage.error('请先勾选物料!');
      return false;
    }

    emit('success', selectRows);
    closeFn();
    // console.log("----selectIds",selectIds.value)
  }
  function closeFn() {
    // clearSelectedRowKeys();
    tableRef.value.clearCheckboxRow();
    closeModal();
  }
</script>
